<template>
  <div class="button-group">
    <!-- 查询按钮 -->
    <el-button
      v-if="showQuery"
      type="primary"
      class="query"
      @click="handleQuery"
      plain
    >
      查询
    </el-button>

    <!-- 批量删除按钮 -->
    <el-button
      v-if="showBatchDelete"
      type="success"
      class="batchDelete"
      @click="handleBatchDelete"
    >
      批量删除
    </el-button>

    <!-- 新增按钮 -->
    <el-button
      v-if="showPlusBtn"
      type="primary"
      :icon="Plus"
      class="plusBtn"
      @click="handlePlus"
    >
      新增
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { defineProps, defineEmits } from 'vue'
//import type { AxiosInstance } from 'axios' // 若用axios，可引入类型

// 定义通用 API 函数类型
type ApiFunction<T = unknown, R = unknown> = (params: T) => Promise<R>

// 定义 props，接收外部传入的配置
const props = defineProps({
  // 控制按钮显隐
  showQuery: {
    type: Boolean,
    default: false
  },
  showBatchDelete: {
    type: Boolean,
    default: false
  },
  showPlusBtn: {
    type: Boolean,
    default: false
  },

  // 接口参数
  queryParam: {
    type: Object,
    default: () => ({})
  },
  deleteParam: {
    type: Object,
    default: () => ({})
  },
  plusParam: {
    type: Object,
    default: () => ({})
  },

  // 接口方法（建议传入 Promise 函数，保持组件通用性）
  queryApi: {
    type: Function as unknown as () => ApiFunction<object, unknown>,
    required: true
  },
  deleteApi: {
    type: Function as unknown as () => ApiFunction<object, unknown>,
    required: true
  },
  plusApi: {
    type: Function as unknown as () => ApiFunction<object, unknown>,
    required: true
  }
})

// 定义事件，可向外传递结果或错误
const emit = defineEmits([
  'query-success',
  'query-error',
  'delete-success',
  'delete-error',
  'plus-success',
  'plus-error'
])

// 查询按钮逻辑
const handleQuery = async () => {
  try {
    const res = await props.queryApi(props.queryParam)
    emit('query-success', res)
  } catch (err) {
    emit('query-error', err)
  }
}

// 批量删除逻辑
const handleBatchDelete = async () => {
  try {
    const res = await props.deleteApi(props.deleteParam)
    emit('delete-success', res)
  } catch (err) {
    emit('delete-error', err)
  }
}

// 新增逻辑
const handlePlus = async () => {
  try {
    const res = await props.plusApi(props.plusParam)
    emit('plus-success', res)
  } catch (err) {
    emit('plus-error', err)
  }
}
</script>

<style scoped>
/* 样式可根据需求调整，若父组件已有全局样式，也可省略 */
.button-group {
  display: flex;
  gap: 8px;
}
.query {
  /* 自定义样式 */
}
.batchDelete {
  /* 自定义样式 */
}
.plusBtn {
  /* 自定义样式 */
}
</style>
